{% extends "base.html" %}

{% block title %}日志{% endblock %}

{% block head %}
{{ super() }}
<link rel="stylesheet" href="/static/xterm/3.14.5/xterm.css"/>

{% endblock %}


{% block content %}
<!-- 页面头 -->
<section class="content-header">
  <!--头部标题-->
  <h1>
    日志
    <!--    <small>advanced tables</small>-->
  </h1>
  <!--面包屑-->
  <ol class="breadcrumb">
    <li><a href="/"><i class="fa fa-home"></i> 主页</a></li>
    <li><a href="/blues/blues/clusterler/cluster">集群管理</a></li>
    <li>工作负载</li>
    <li>详情</li>
    <li class="active">日志</li>
  </ol>
</section>

<!-- 页面内容 -->
<section class="content">
  <div class="row">
    <div class="col-xs-12">
      <div>
        <p>
          命名空间: <span id="namespace">{{namespace}}</span>&nbsp;&nbsp;&nbsp;
          Pod: <span id="pod">{{pod}}</span>&nbsp;&nbsp;&nbsp;
          容器: <span id="container">{{container}}</span>&nbsp;&nbsp;
          <button type="button" id="downloadBtn">下载日志</button>
          <button type="button" id="clearBtn">清屏</button>
          <button type="button" id="bottomBtn">跳到底部</button>
        </p>

      </div>

      <!--      <div id="msg-list" style="height: 70%; overflow-y: scroll; background: #000000; color: #b6b6b6; padding: 10px;">-->
      <!--      </div>-->

      <div id="terminal"></div>

    </div>
    <!-- /.col -->
  </div>
  <!-- /.row -->
</section>
<!-- /.页面内容 -->
{% endblock %}


{% block script %}
<script type="text/javascript" src="/static/xterm/3.14.5/xterm.js"></script>
<script type="text/javascript" src="/static/xterm/3.14.5/fit.js"></script>
<script>
    // 定义全局变量,用于下载
    var download_txt = ""

    // 下载日志的函数
    function download(filename, text) {
        var element = document.createElement('a');
        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
        element.setAttribute('download', filename);
        element.style.display = 'none';
        document.body.appendChild(element);
        element.click();
        document.body.removeChild(element);
    }

    // 页面载入后执行
    $(function () {
        // 初始化xterm
        var term = new Terminal({
            fontSize: 15,
            fontFamily: 'courier',
            disableStdin: true,
            cursorBlink: false, // 关标闪烁
            cursorStyle: "underline", // 光标样式 'block' | 'underline' | 'bar'
            scrollback: 10000, // 当行的滚动超过初始值时保留的行视窗，越大回滚能看的内容越多，
        });
        term.open(document.getElementById('terminal'));

        // xterm 窗口自适应
        Terminal.applyAddon(fit);
        // 载入后 以及每次调整窗口大小后，同时调整日志消息框的大小
        $('#terminal').css('height', $(window).height() - 150)
        term.fit();
        $(window).resize(function () {
            $('#terminal').css('height', $(window).height() - 150)
            term.fit();
        })

        // 本地测试时，打开goland，打开k8s-test项目，打开websocketK8sLog目录，执行打开websocketK8sLog即可
        var hostname = window.location.hostname
        var ws = new WebSocket("ws://" + hostname + ":18888/log");
        var host = "{{host}}"
        var token = "{{token}}"

        ws.onopen = function () {
            console.log("ws open");
            let namespace = $("#namespace").text()
            let pod = $("#pod").text()
            let container = $("#container").text()
            ws.send("[init] " + host + " " + token + " " + namespace + " " + pod + " " + container)
        };

        ws.onmessage = function (evt) {
            // console.log("收到消息：" + evt.data)
            // let myscroll = $('#msg-list');
            // myscroll.append(evt.data).append("<br/>");
            // myscroll.scrollTop(myscroll.get(0).scrollHeight);

            term.writeln(evt.data.replace(/[\r\n]/g, ""))
            download_txt += evt.data
        };

        ws.onclose = function (evt) {
            console.log("WebSocket Closed!");
            ws.send("stop")
            ws.close()
        };

        ws.onerror = function (evt) {
            console.log("WebSocket Error!");
            ws.send("stop")
            ws.close()
        };

        $("#getLogs").click(function (event) {
            let namespace = $("#namespace").val()
            let pod_name = $("#pod_name").val()
            let container_name = $("#container_name").val()
            ws.send("[init] " + namespace + " " + pod_name + " " + container_name
            );
        });
        $("#stop").click(function (event) {
            ws.send("stop")
        });


        // 下载按钮
        $("#downloadBtn").click(function (event) {
            download("log.txt", download_txt);
        });

        // 清除按钮
        $("#clearBtn").click(function (event) {
            term.clear();
        });

        // 滚到底部按钮
        $("#bottomBtn").click(function (event) {
            term.scrollToBottom();
        });


    });
</script>
{% endblock %}